import { ScrollProgress, useScrollProgress } from "@/components/animate/scroll-progress";
import { themeVars } from "@/theme/theme.css";
import { Button } from "@/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/ui/card";

// 千里之行始于足下，进度如诗韵流淌 - 中文展示文本
const TEXT = `
水调歌头·明月几时有，苏轼的这首词，是中秋咏月的千古绝唱。词人以其豪放的胸怀和深邃的哲思，将个人的离愁别恨与对宇宙人生的思考巧妙融合，创造了一个超越时空的艺术境界。

明月几时有？把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。

转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。

这首词的妙处在于，词人从现实的离别之苦出发，却最终升华为对人生的达观和对美好的祝愿。"人有悲欢离合，月有阴晴圆缺，此事古难全"，这种对人生不完美的接纳和理解，体现了中国古代文人的人生智慧。

而"但愿人长久，千里共婵娟"这句话，更是千百年来无数离人的共同心声，表达了对美好生活的向往和对亲人的深深思念。即使分隔千里，只要心中有爱，就能在同一轮明月下感受到彼此的温暖。

中国古典诗词的魅力正在于此，它们不仅是文字的艺术，更是情感的载体和智慧的结晶。每一首经典的诗词都能跨越时空的限制，与今天的我们产生心灵的共鸣。

在现代社会的快节奏生活中，我们更应该珍惜这些传统文化的瑰宝。它们如甘露般滋润着我们的心田，让我们在浮躁的世界中找到内心的宁静，在功利的追求中保持精神的纯净。

诗词不仅是语言的艺术，更是生活的哲学。它教会我们如何面对离别，如何处理情感，如何看待人生的起伏变化。正如苏轼在这首词中所展现的，真正的智者能够在困顿中保持豁达，在分离中寄托美好的祝愿。

让我们在阅读这些美丽篇章的同时，也学会用诗意的眼光看待生活，用达观的心态面对挫折，用温暖的情怀对待他人。这样，我们的生活就会因为这些古老而永恒的智慧而变得更加丰富多彩。

月圆月缺，人聚人散，这是自然的规律，也是人生的常态。重要的不是避免这些变化，而是学会在变化中找到不变的美好，在分离中珍惜相聚的时光，在困境中保持希望的光芒。

正如古人所言："山重水复疑无路，柳暗花明又一村。"人生总有低谷，但也总有转机。只要我们保持一颗诗意的心，就能在最平凡的日子里发现不平凡的美，在最困难的时刻找到前进的勇气。
`;
export default function ScrollProgressView() {
	// 观山水之变化，测阅读之进度
	const containerProgress = useScrollProgress("container");

	return (
		<>
			<Button variant="link" asChild>
				<a
					href="https://www.framer.com/motion/"
					style={{ color: themeVars.colors.palette.primary.default }}
					className="mb-4 block"
				>
					https://www.framer.com/motion/
				</a>
			</Button>
			<Card title="滚动进度条">
				<CardHeader>
					<CardTitle>滚动进度条</CardTitle>
				</CardHeader>
				<CardContent>
					{/* 进度如月盈月缺，显示阅读之深浅 */}
					<ScrollProgress scrollYProgress={containerProgress.scrollYProgress} />
					<div ref={containerProgress.elementRef} className="h-80 overflow-auto">
						{[...Array(4)].map((_, index) => (
							// 数组遍历如春花秋月，各有其序
							<div key={index}>{TEXT}</div>
						))}
					</div>
				</CardContent>
			</Card>
		</>
	);
}
